<template>
  <div class="page-content">
    <div v-wechat-title="$route.meta.title"></div>
    <mt-field label="姓名"
              placeholder="请输入姓名"
              class="must"
              v-model="name"
              @blur.native.capture="checkName()"></mt-field>
    <mt-field label="手机号"
              placeholder="请输入手机号"
              class="must"
              type="tel"
              v-model="phone"
              @blur.native.capture="checkPhone()"></mt-field>
      <mt-field label="体温"
                type="number"
                placeholder="请输入体温"
                v-model="heat">
          <span class="num">°C</span>
      </mt-field>
      <mt-button type="primary"
                 class="showMore"
                 size="small"
                 @click="showMore()">填写更多信息</mt-button>
      <div v-show="isShow">
          <mt-field label="证件类型"
                    disabled>
              <mt-popup v-model="popupVisible"
                        popup-transition="bottom"
                        closeOnClickModal="true"
                        position="bottom">
                  <mt-picker :slots="ID_type"
                             @change="onshipChange"
                             showToolbar>
                      <mt-button type="primary"
                                 class="usi-btn-sure"
                                 @click="popupVisible = !popupVisible"
                                 size="small">确定</mt-button>
                  </mt-picker>
              </mt-popup>
              <div class="my-content-list row justfy"
                   @click="ShouPup">
                  <input readonly
                         placeholder="请选择"
                         v-model="idType" />
                  <img class="arrow"
                       src="../assets/images/arrow-left.png"
                       alt />
              </div>
          </mt-field>
          <mt-field label="证件号码"
                    placeholder="证件号码"
                    v-model="idcard"
                    @blur.native.capture="checkIDcard()"></mt-field>
          <mt-field label="来访事由"
                    disabled>
              <mt-popup v-model="popupVisible2"
                        popup-transition="bottom"
                        closeOnClickModal="true"
                        position="bottom">
                  <mt-picker :slots="reason_type"
                             @change="onReasonChange"
                             showToolbar>
                      <mt-button type="primary"
                                 class="usi-btn-sure"
                                 @click="popupVisible2 = !popupVisible2"
                                 size="small">确定</mt-button>
                  </mt-picker>
              </mt-popup>
              <div class="my-content-list row justfy"
                   @click="ShouPup2">
                  <input readonly
                         placeholder="请选择"
                         v-model="reasonType" />
                  <img class="arrow"
                       src="../assets/images/arrow-left.png"
                       alt />
              </div>
          </mt-field>
          <mt-field v-show="isShow"
                    label="来访事由其他"
                    placeholder="请输入来访事由"
                    v-model="visitingReason"></mt-field>
          <mt-field label="同行人数"
                    type="number"
                    placeholder="请输入同行人数"
                    v-model="number">
              <span class="num">人</span>
          </mt-field>
          <mt-field label="备注"
                    class="textarea"
                    placeholder="选填"
                    type="textarea"
                    rows="4"
                    v-model="introduction"></mt-field>
      </div>
    <mt-button type="primary"
               class="addcard"
               size="small"
               @click="addHealthCard">确认登记</mt-button>
  </div>
</template>
<script>
import "common/css/form.styl";
import wechat from '@/assets/js/wechat.js';// 跳转微信 获取权限

export default {
  data () {
    return {
      name: "",
      heat: "", //体温
      visitingReason: "", //来访事由
      number: "", //同行人数
      phone: "", //手机号
      idcard: "", //身份证号
      introduction: "", //备注
      idType: "",
      idTypeCode: "",
      reasonType: "",
      reasonTypeCode: "",
      popupVisible: false,
      popupVisible2: false,
      isShow: false,
      gender: "",
      ID_type: [
        //证件类型
        {
          values: ["身份证", "护照", "港澳台通行证"],
          defaultIndex: 0
        }
      ],
      reason_type: [{ values: ["上班", "快递或外卖", "办事", "其他"], defaultIndex: 0 }],

    };
  },
  watch: {},
  methods: {
     //填写更多 方法
     showMore(){
         this.isShow = !this.isShow;
     },
    checkName(){
        if(!this.name){
            this.$public.toast("请输入姓名！");
        }
    },
    checkIDcard () {
      if (this.idcard) {
        if (!this.$public.isIDcard(this.idcard)) {
          this.$public.toast("身份证格式有误！");
        }
      }
    },
    checkPhone () {
      if (this.phone) {
        if (!this.$public.isPhone(this.phone)) {
          this.$public.toast("手机号码格式有误！");
        }
      }
    },
    onshipChange (picker, values) {
      this.idType = values;
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },
    onReasonChange (picker, values) {
      this.reasonType = values;
      if (values[0] == "其他") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },
    ShouPup () {
      this.popupVisible = true;
    },
    ShouPup2 () {
      this.popupVisible2 = true;
    },
    addHealthCard () {
      $.pubVariable.idCardType.forEach((item, i) => {
        if (item.text == this.idType[0]) {
          this.idTypeCode = item.id;
        }
      });
      $.pubVariable.visiting_reason.forEach((item, i) => {
        if (item.text == this.reasonType[0]) {
          this.reasonTypeCode = item.id;
        }
      });
      if (!this.phone || !this.name ) {
        this.$public.toast("信息不完整！");
      } else if (!this.$public.isPhone(this.phone)) {
        this.$public.toast("手机号码格式有误！");
      } else if (this.idcard && Boolean(this.idcard.trim()) && !this.$public.isIDcard(this.idcard)) {
        this.$public.toast("身份证格式有误！");
      }else {
        var _that = this;
        // 校验成功
        this.gender = this.gender ? this.gender : (this.idcard ? this.$public.idcardGetinfo(this.idcard, 2) : "");
        wechat.setRSA((RSA) => {
          this.$axios.http
            .post({
              funcName: "/fwdj/person/signIn",
              params: {
                dwid: sessionStorage.getItem("openId"),
                openId: sessionStorage.getItem("openId"),
                sjhm: RSA(this.phone, true),
                xm: this.name ? RSA(encodeURI(this.name), true) : "",
                xb: this.gender,
                zjlx: this.idTypeCode,
                zjhm: this.idcard ? RSA(this.idcard, true) : "",
                tw: this.heat,
                lfsy: this.reasonTypeCode,
                lfsyqt: this.visitingReason,
                txrs: this.number,
                bz: this.introduction
              }
            })
            .then(res => {
              if (res && res.code == "200") {
                sessionStorage.setItem("userInfo", JSON.stringify(res.record));
                this.$router.push({ name: "visitorSuccessful" });

              } else {
                _that.$public.toast(res.msg);
              }
            });
        });
      }
    },
    // 判断是否已登记过
    getRecord () {
      this.$axios.http
        .post({
          funcName: "/fwdj/person/getRecord",
          params: {
            dwid: sessionStorage.getItem("openId"),
            openId: sessionStorage.getItem("openId"),
          }
        })
        .then(res => {
          if (res && res.code == "200") { //
            if (res.record && res.record.sjhm) {
              let record = res.record;
              sessionStorage.setItem("userInfo", JSON.stringify(res.record));
              wechat.setRSADeCode((RSA) => {
                this.name = record.rsaXm ? decodeURI(RSA(record.rsaXm, false)) : "";
                this.phone = RSA(record.rsaSjhm, false); //手机号
                  this.idcard = RSA(record.rsaZjhm, false); //身份证号
              });

            }

          } else {
            this.$public.toast(res.msg);
          }
        });
    }
  },
  mounted () {
    let url = window.location.href;
    wechat.wechatLogin(() => {
      this.getRecord();
    }, url);
  }
};
</script>

<style lang="stylus" >
.textarea
  .mint-cell-value textarea
    background #f5f5f5
    text-indent 10px
    border-radius 5px
</style>